<template>
  <div class="Subunit-box-child3">
    <div>
      <div class="header" ref="header">
        <titles :title="props.info.text" />
        <div class="subTitle" v-if="props.info.subTitle">——{{ props.info.subTitle }}</div>
        <div class="boxs-dirction" v-html="getTextHtml(props.info.remarks)"></div>
      </div>
    </div>
    <!-- @click="pathChild(props.info, 0)" -->
    <div class="box-item" ref="contentBox">
      <img class="cover-box" :src="publicUrls + 'customized/zjz/endImg.png'" alt="" />
      <!-- <audioCom :url="'/369462942949445/file/375890628554821/exhibit/202505/679905105121349.mp3'" name="namenamename" /> -->
    </div>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
// import audioCom from '../publicComponents/components/auxiliarys/audio.vue';
import { publicUrls } from '@/utils/minxin';
import { pathList, pathListLoop } from '../route';
import { urls } from '@/utils/request/upload';
import titles from './title.vue';

import textMode from './textMode.vue';
import { onMounted, ref } from 'vue';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { getTextHtml } from '@/utils/minxin';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';
const header = ref(null);
const router = useRouter();
const route = useRoute();
const store = useProjectStore();
const rightBox = ref(null);
const leftBox = ref(null);
const contentBox = ref(null);
const props = defineProps({
  info: {
    type: Object,
  },
});
const pathChild = (e: any, index: number) => {
  //console.log(e);

  store.setchildModel(e.children[index]);
  store.setCurrent(index);
  store.homeCurrent = 5;
  router.push({
    name: route.meta.loopType ? pathListLoop[8] : pathList[8],
    query: { current: index, childId: props.info.id },
  });
};

onMounted(() => {
  animation();
  animation1();
});
console.log(props.info, '11111');
const animation = () => {
  let canTrigger = true; // 标记是否可以触发

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码s
        //console.log('c', header.value);
        // header.value.classList.add('animation-box7');
        header.value.classList.add('animation-box2');

        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
        // if (header.value) {
        //   header.value.classList.remove('animation-box7');
        // }
      }
    });
  });
  observer.observe(header.value);
};
const animation1 = () => {
  let canTrigger = true; // 标记是否可以触发

  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting && canTrigger) {
        // 当元素进入视窗口时触发的代码s
        //console.log('c', header.value);
        // contentBox.value.classList.add('animation-box6');
        contentBox.value.classList.add('animation-box3');
        // rightBox.value.classList.add('animation-box3');
        // leftBox.value.classList.add('animation-box2');

        // 设置一个延迟时间，防止频繁触发
        canTrigger = false;
        setTimeout(() => {
          canTrigger = true;
        }, 500); // 设置延迟时间为 500 毫秒
      } else {
      }
    });
  });
  observer.observe(contentBox.value);
};
</script>

<style lang="less" scoped>
@import './index.less';
.Subunit-box-child3 {
  padding: 0 16px;
  overflow: hidden;
}
.box-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.boxs-dirction {
  width: 100%;
  margin-bottom: 24px;
  :deep(p) {
    text-align: justify;
    text-indent: 2em;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    line-height: 25px;
    margin-bottom: 12px;
  }
  :deep(p:last-of-type) {
    margin-bottom: 0px;
  }
}

.cover-box {
  width: 343px;
  height: 106px;
  object-fit: contain;
  margin-bottom: 16px;
}
.item-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 281px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  img {
    width: 24px;
    height: 24px;
    margin-right: 7px;
  }
  span {
    font-family: SourceBold;
    font-size: 20px;
    color: #a2463c;
    line-height: 22px;
  }
}
.item-content-mg {
  margin-bottom: 20px;
}
</style>
